<script lang="ts" setup>
import RigthTitle from './RigthTitle.vue'
import ChartsView from '../../components/ChartsView.vue'
import { getHydroelectric } from '../../api/index'
import { ref, onMounted } from 'vue'
import {baroption} from '../../utils/option'
// 定义唯一标识符
let key = ref(0)
// 定义总用水量
const totalWater = ref(0)
// 定义总用电量
const totalDian = ref(0)
// 发送请求获取option的数据
getHydroelectric().then((resp) => {
  // console.log(resp,'1132');
  let data = resp.data.data.result[0]
  console.log(223, data)
  // 修改option
  baroption.value.xAxis = data.yAxis
  baroption.value.series = data.series
  key.value = +new Date()
  data.series.forEach((item) => {
    if (item.name != '安防设备用电') {
      totalWater.value += item.data.reduce((a, b) => a + b)
    } else {
      totalDian.value += item.data.reduce((a, b) => a + b)
    }
  })
})
const emycharts = ref()
onMounted(() => {
  window.addEventListener('resize', () => emycharts.value.charts.resize())
})
</script>
<template>
  <div class="container-righttop">
    <!-- 标题 -->
    <RigthTitle title="水电用量"></RigthTitle>
    <!-- 下面图标部分 -->
    <div class="mycharts">
      <!-- 上面的盒子 -->
      <div class="mycharts-title">
        <div>
          <img src="../../assets/dain.png" alt="" />
          <span>总用电量{{ totalDian }}</span>
        </div>
        <div>
          <img src="../../assets/shui.png" alt="" />
          <span> 总用水量{{ totalWater }}</span>
        </div>
      </div>
      <!-- 数据统计图表 -->
      <div class="echarts">
        <ChartsView :option="baroption" :key="key" ref="emycharts"></ChartsView>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container-righttop {
  position: absolute;
  top: 100px;
  left: 0;
  height: 32%;
  width: 100%;
  padding: 0 50px 0 70px;
  box-sizing: border-box;
  .mycharts {
    background-color: #1b1f60;
    color: #fff;
    margin-top: 10px;
    height: 100%;
    .mycharts-title {
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      > div {
        border: 2px solid skyblue;
        height: 100%;
        line-height: 40px;
        text-align: center;
        padding: 0 4px;
        img {
          vertical-align: middle;
          position: relative;
          top: -2px;
          margin-right: 14px;
        }
      }
    }
    .echarts {
      height: 80%;
      margin-top: 6px;
    }
  }
}
</style>